<template>
  <!-- 技术员SLA按时完成率 -->
  <div v-loading="loading">
    <div style="padding: 10px">
      <el-date-picker
        v-model="dateArr"
        type="daterange"
        range-separator="到"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
      />
    </div>
    <div :id="chartId" class="chart-box"></div>
  </div>
</template>

<script setup lang="ts" name="TechnicianSLAcompletionRate">
import { ref, watch, onMounted } from "vue";
import { findmonth } from "@/api/modules/index";
import * as echarts from "echarts";

const chartId = ref("chart-box" + new Date().getTime());

const dateArr = ref<string[]>([]);
const loading = ref(false);

let chartDom;
let myChart;
let option;

const getData = () => {
  loading.value = true;
  findmonth({
    start: dateArr.value[0] + " 00:00:00",
    over: dateArr.value[1] + " 23:59:59"
  })
    .then((res: any) => {
      loading.value = false;
      chartDom = document.getElementById(chartId.value);
      myChart = echarts.init(chartDom);
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: function (params) {
            return `
              <strong>${params[0].data.name}</strong><br/>
              占比: ${params[0].data.total_slaCount}%<br/>
              数量: ${params[0].data.slaCount}/${params[0].data.total}`;
          }
        },
        legend: {},
        grid: {
          left: "15",
          right: "15",
          bottom: "15",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: res.map(item => item.name)
        },
        yAxis: {
          type: "value",
          min: 0, // 设置 Y 轴的最小值为 0
          max: 100 // 设置 Y 轴的最大值为 100
        },
        color: ["#339966", "#FFCC00"],
        series: [
          {
            name: "百分比(%)",
            type: "bar",
            emphasis: {
              focus: "series"
            },
            data: res.map(item => {
              return {
                ...item,
                value: item.total_slaCount
              };
            }),
            barWidth: "50%",
            // barMinWidth: '20px',
            barMaxWidth: "40px"
          }
        ]
      };
      myChart.setOption(option);
    })
    .catch(() => {
      loading.value = false;
    });
};

watch(
  () => dateArr.value,
  val => {
    getData();
  }
);

onMounted(() => {
  let myDate = new Date();
  let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
  let month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  let month_text = "";
  month_text = month > 9 ? "" + month : "0" + month;
  let day = myDate.getDate(); //获取当前日(1-31)
  let day_text = "";
  day_text = day > 9 ? "" + day : "0" + day;
  dateArr.value = [year + "-01-01", [year, month_text, day_text].join("-")];
});
</script>

<style scoped lang="scss">
.chart-box {
  height: 300px;
}
</style>
